<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}">
    <title>index</title>
</head>
<body>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        {# 数据部分 #}
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>price</th>
            </tr>
            </thead>
            <tbody>
            <!-- 只循环打印当前页面的内容 -->
            {% for book in data %}
                <tr>
                    <th>{{ forloop.counter }}</th>
                    <th>{{ book.name }}</th>
                    <th>{{ book.price }}</th>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {# 分页器 #}
        <div class="text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {{ html_str }}
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>